<template>
    <div>
        <div class="my">
        <!-- <button @click="$store.commit('change',3)">改变</button> -->
        <div class="my-header"  v-if="isLogin">
            <div class="my-top">
                <van-image round width="20vw" height="20vw" :src="userInfo.avatar" />
                <div class="my-txt1">
                    <p>{{userInfo.nickname}}</p>
                </div>
                <router-link to="/userInfo">
                    <div class="my-txt2">
                        <p>编辑资料</p>
                    </div>
                </router-link>
            </div>
            <!-- 头条 获赞 -->
            <div class="my-sc">
                <van-grid :border="false" :column-num="2" class="ft">
                    <van-grid-item>
                        <div class="my-txt3">
                            <p>{{publish_num}}</p><span>头条</span>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <div class="my-txt3">
                            <p>{{liked_num}}</p><span>获赞</span>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
  <!-- 登录 -->
            <div class="not-login" v-else @click="$router.push('/login')">
                <div class="mobile">
                    <van-icon size="13vw" color="#2489ff" name="graphic" />
                </div>
                <div class="text">登录 / 注册</div>
            </div>


            <!-- 收藏 历史 -->
            <div class="my-icon">
                <van-grid :border="false" :column-num="2" style="display: flex;justify-content: space-between;">
                    <van-grid-item>
                        <div class="my-txt4">
                            <p>
                                <van-icon name="star-o" color="#ec5779" size="6vw" />
                            </p><span>收藏</span>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <div class="my-txt4">
                            <p>
                                <van-icon name="underway-o" color="#ff9d1d" size="6vw" />
                            </p><span>历史</span>
                        </div>
                    </van-grid-item>
                </van-grid>
                <!-- <div class="my-txt4"><p><van-icon name="star-o" color="#ec5779" size="6vw"/></p><span>收藏</span></div>
            <div class="my-txt4"><p><van-icon name="underway-o" color="#ff9d1d" size="6vw"/></p><span>历史</span></div> -->
            </div>
            <!-- 修改密码 联系我们  关于我们 -->
            <div class="my-cell">
                <van-cell title="修改密码" is-link />
                <van-cell title="联系我们" is-link />
                <van-cell title="关于我们" is-link />
            </div>
            <!-- 退出登录 -->
            <div class="my-secede">
                <van-button type="primary" size="large" color="#fff" text-color="#ec5779" @click="logout" v-if="isLogin">退出登录</van-button>
            </div>
            <!-- 底部栏 -->
            <tabBar></tabBar>
        </div>
    </div>
</template>
<style lang="less">
p {
    margin: 0;
}

body {
    background: #f7f8fa;
}

.my .my-top {
    height: 90px;
    background: @green;
}

.my .my-top {
    display: flex;
    justify-content: space-between;
}

.my .my-top .van-image {
    position: relative;
    top: 15px;
    left: 15px;
}

.my .my-top .my-txt2 {
    width: 75px;
    height: 20px;
    background: #f7f8fa;
    border-radius: 50px;
}

.my .my-top .my-txt1 p {
    color: #f7f8fa;
    font-size: 14px;
    height: 20px;
    width: 150px;
    position: absolute;
    left: -10px;


}

.my .ft .van-grid-item__content {
    background-color: @green;
}

.my .my-top .my-txt2 p {
    text-align: center;
    color: #666666;
    font-size: 13px;
}

.my .my-top .my-txt1 {
    position: relative;
    top: 32px;
    right: 75px;
}

.my .my-top .my-txt2 {
    position: relative;
    top: 32px;
    right: 10px;
}

// .my .my-sc{
//     display: flex;
//     justify-content: space-around;
//     background: @green;
//     padding-top: 15px;
//     padding-bottom: 15px;
// }
.my .my-sc .my-txt3 p {
    font-size: 15px;
    color: #fff;
    padding-left: 9px;
}

.my .my-sc .my-txt3 span {
    font-size: 14px;
    color: #fff;

}

.my .van-grid {
    display: flex;
    justify-content: space-around;
}

.my .my-icon {

    padding-top: 15px;
    padding-bottom: 15px;
    background: #fff;
}

.my .my-icon .my-txt4 P {
    padding-left: 4px;
}

.my .my-icon .my-txt4 span {
    font-size: 14px;
}

// .my .my-icon .my-txt4 p{
//     position: relative;
//     right: 6px;
// }
.my .my-cell {
    margin-top: 10px;
}

.my .my-secede {
    height: 45px;
    background: #fff;
    margin-top: 10px;
}

.my .my-secede p {
    font-size: 14px;
    color: #ec5779;
    text-align: center;
    line-height: 45px;
}

.my .van-button__text {
    color: #ec5779;
}

// 未登录
.my .not-login {
    padding-top: 40px;
    height: 140px;
    background: @green;
    line-height: 50px;
}

.my .not-login .mobile,
.my .text {
    text-align: center;
}

.my .not-login .mobile .van-icon {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
}

.my .not-login .text {
    color: #fff;
}
</style>
<script>
import Tabbar from '@/components/tabBar';
import { Icon, Cell, Button,Dialog } from 'vant';
import { Image as VanImage } from 'vant';
import { mapState,mapMutations } from 'vuex';
export default {
    name: 'my',
    components: {
        [Tabbar.name]: Tabbar,
        [Icon.name]: Icon,
        [Cell.name]: Cell,
        [VanImage.name]: VanImage,
        [Button.name]: Button,
        [Dialog.Component.name]: Dialog.Component,
    },
    data() {
        return {
        
        }
    },
    computed:{
        ...mapState(['uid','token','isLogin','userInfo','liked_num','publish_num']),
        //...mapState(['uid','token']), ==uid(),token()
        // uid(){
        //     return this.$store.state.uid
        // }
        // token(){
        //     return this.$store.state.token
        // }
    
    },
    methods:{
        ...mapMutations(['clear']),
    async logout(){

        let res = await Dialog.confirm({
                title: '提示',
                message: '您确认退出登录吗？',
                });
                if(res == 'confirm'){
                    //清除数据   清除指定数据
                    localStorage.clear();
                    //清除所有数据
                    // localStorage.removeItem('token')
                        this.clear()
                    // this.$store.commit('clear')
                }
                // console.log(res)
        }
    }
    
};
</script>